<template>
  <div class="title">
    <h1>博客系统</h1>
    <el-button type="info" round @click="searchStateFn">查看下state的值</el-button>
  </div>
</template>

<script lang="ts" setup>
import { watch } from 'vue';
import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore()
// store.commit('increment')


function searchStateFn() {
  console.log(store.state.state);
}
watch(() => store.state.state, (newValue: object, oldValue: object) => {
  console.log('message 发生变化');
  console.log('新值:', newValue);
  console.log('旧值:', oldValue);
},
  {
    deep: true,
  }
)

</script>

<style lang="scss" scoped>
$num: 500px;
div {
  height: $num;
  background-color: pink;
  margin: 20px;
  h1 {
    text-align: center;
    font-size: 40px;
    color: red;
  }
}
</style>
